<%-- 
    Document   : addProduct
    Created on : Jan 28, 2013, 2:30:23 PM
    Author     : NganNLK60334
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<link href="CSS/CSSAdmin/addProduct.css" rel="stylesheet" type="text/css">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>FunnyFashion</title>
    </head>
    <body onload="addEventListenerForInput();">
        <%@include file="/WEB-INF/Admin/header.jsp" %>
        <div class="page-wraper">
            <form  method ="POST" action="AdminController">
                <font alignt="center" style="color: red; font-weight: bold;">${requestScope.addSuccess}</font>
                <h1 align="center">Thêm sản phẩm</h1>

                <div class="addproduct-wraper">
                    <div class="addproduct-div">
                        <label class="addProduct-label">Tên sản phẩm(*) : </label>
                        <div class="product-info">
                            <input class="product-info" type="text" name="txtname" value="" required>
                        </div>
                    </div>

                    <div class="addproduct-div">
                        <label class="addProduct-label">Giá(*) : </label>
                        <div class="product-info">
                            <input class="product-info" type="number" name="txtprice" value="" required min="0">
                        </div>
                    </div>

                    <div class="addproduct-div">
                        <label class="addProduct-label">Nam/Nữ</label>
                        <div class="product-info">
                            <select name="option">
                                <option>male</option>
                                <option>female</option>
                            </select>
                        </div>
                    </div>

                    <div class="addproduct-div">
                        <label class="addProduct-label">Mô tả : </label>
                        <div class="product-info">
                            <!--                    <input class="product-info1" type="text" name="txtdescription" value="">-->
                            <textarea class="product-info" name="txtdescription"></textarea>
                        </div>
                    </div>
                    <div class ="upload-wraper">

                        <label class="addProduct-label" required>Hình ảnh(*) </label>
                        <div class="upload-btn">
                            <!--                    <button class="upload-btn1" type="submit" name="btnAction" value="">Browse</button><br/>-->
                            <input class="upload-btn1" type="file"  name="file" id="imageUploadInput"/>


                        </div>
                        <div class="upload-show-image"> <canvas id="ImageCanvas"/></div>

                    </div>
                    <div class="save-btn" align="center">
                        <button class="save-btn1" type="submit" name="btnAction" value="addProducts">Lưu</button>
                    </div>
                </div>
            </form>
        </div>
        <script>
            function addEventListenerForInput(){
                var InputField = document.getElementById("imageUploadInput");
                InputField.addEventListener('change', handleImage, false);
            }
            
            function handleImage(e){
                var canvas = document.getElementById("ImageCanvas");
                var ctx  = canvas.getContext('2d');
                var reader = new FileReader();
                reader.onload = function(event){
                    var img = new Image();
                    img.onload = function(){
                        canvas.width = 150;
                        canvas.height = 150;
                        ctx.drawImage(img,0,0, 150, 150);

                    }
                    img.src = event.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);
            }

        </script>
    </body>
</html>
